<template>
  <el-container >
    <el-header>
      <p>财务明细查询</p>
    </el-header>
    <el-main>
      <el-row class="btn-group">
        <el-button class="btn"
                   @click="handleDownloadFinDetail"><span>导出</span><i class="el-icon-download"></i>
        </el-button>
      </el-row>
      <el-table :data="dataList" v-loading="listLoading" element-loading-text="给我一点时间"
                tooltip-effect="dark"
                highlight-current-row stripe
                style="width: 100%" ref="finDetailTable"
                @selection-change="handleSelectChangeFinDetail">
        <el-table-column fixed sortable align="center" label="流水号" width="150" prop="account_no" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.account_no}}</span>
          </template>
        </el-table-column>
        <el-table-column  sortable align="center" label="财务数据类型" width="150" prop="cwtypevalue">
          <template slot-scope="scope">
            <span>{{scope.row.cwtypevalue}}</span>
          </template>
        </el-table-column>
        <el-table-column   sortable align="center" label="支付方式" width="150" prop="account_paytypevalue">
          <template slot-scope="scope">
            <span>{{scope.row.account_paytypevalue}}</span>
          </template>
        </el-table-column>
        <el-table-column  sortable align="center" label="入账日期" width="150" prop="booked_date">
          <template slot-scope="scope">
            <span>{{scope.row.booked_date}}</span>
          </template>
        </el-table-column>
        <el-table-column   sortable align="center" label="对账日期" width="150" prop="check_date">
          <template slot-scope="scope">
            <span>{{scope.row.check_date}}</span>
          </template>
        </el-table-column>
        <el-table-column  sortable align="center" label="应收金额" width="200" prop="shoudcost">
          <template slot-scope="scope">
            <span>{{scope.row.shoudcost}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="实收金额" width="200" prop="realcost">
          <template slot-scope="scope">
            <span>{{scope.row.realcost}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="未确认费用金额" width="200" prop="owecost">
          <template slot-scope="scope">
            <span>{{scope.row.owecost}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="收款操作人" width="200" prop="receiveusername">
          <template slot-scope="scope">
            <span>{{scope.row.receiveusername}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="收款操作单位" width="200" prop="receiveorgname">
          <template slot-scope="scope">
            <span>{{scope.row.receiveorgname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴当日金额" width="200" prop="repay_drcost">
          <template slot-scope="scope">
            <span>{{scope.row.repay_drcost}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴91后当月金额" width="200" prop="repay_91hdycost">
          <template slot-scope="scope">
            <span>{{scope.row.repay_91hdycost}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴91后往月金额" width="200" prop="repay_91hwycost">
          <template slot-scope="scope">
            <span>{{scope.row.repay_91hwycost}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="手续费" width="200" prop="poundage">
          <template slot-scope="scope">
            <span>{{scope.row.poundage}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="手续费率" width="200" prop="poundagerate">
          <template slot-scope="scope">
            <span>{{scope.row.poundagerate}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="停车场" width="200" prop="account_parkname">
          <template slot-scope="scope">
            <span>{{scope.row.account_parkname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="收费路段" width="200" prop="account_chargeunitname">
          <template slot-scope="scope">
            <span>{{scope.row.account_chargeunitname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="泊位编号" width="200" prop="account_place">
          <template slot-scope="scope">
            <span>{{scope.row.account_place}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="车牌号" width="200" prop="account_carno">
          <template slot-scope="scope">
            <span>{{scope.row.account_carno}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="车辆类型" width="200" prop="account_cartype">
          <template slot-scope="scope">
            <span>{{scope.row.account_cartypename}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="入场收费员姓名" width="200" prop="account_inuserrealname">
          <template slot-scope="scope">
            <span>{{scope.row.account_inuserrealname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="入场收费单位名称" width="200" prop="account_inorgname">
          <template slot-scope="scope">
            <span>{{scope.row.account_inorgname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="入场时间" width="200" prop="account_intime">
          <template slot-scope="scope">
            <span>{{scope.row.account_intime}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="预付费" width="200" prop="account_prepay">
          <template slot-scope="scope">
            <span>{{scope.row.account_prepay}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="出场收费员" width="200" prop="account_outuserrealname">
          <template slot-scope="scope">
            <span>{{scope.row.account_outuserrealname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="出场收费单位" width="200" prop="account_outorgname">
          <template slot-scope="scope">
            <span>{{scope.row.account_outorgname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="最后取证时间" width="200" prop="account_outtime">
          <template slot-scope="scope">
            <span>{{scope.row.account_outtime}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="停车时长" width="200" prop="account_btime">
          <template slot-scope="scope">
            <span>{{scope.row.account_btime}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="应付费" width="200" prop="account_should">
          <template slot-scope="scope">
            <span>{{scope.row.account_should | NumberFormat(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="实付费" width="200" prop="account_real">
          <template slot-scope="scope">
            <span>{{scope.row.account_real}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="预充值付费" width="200" prop="account_adpay">
          <template slot-scope="scope">
            <span>{{scope.row.account_adpay}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="付费类型" width="200" prop="account_paytype">
          <template slot-scope="scope">
            <span>{{scope.row.account_paytypevalue}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="出场类型" width="200" prop="account_outtype">
          <template slot-scope="scope">
            <span>{{scope.row.account_outtypevalue}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="操作时间" width="200" prop="account_handletime">
          <template slot-scope="scope">
            <span>{{scope.row.account_handletime}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="开票人" width="200" prop="account_billuser">
          <template slot-scope="scope">
            <span>{{scope.row.account_billuser}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="开票单位" width="200" prop="account_billorg">
          <template slot-scope="scope">
            <span>{{scope.row.account_billorg}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="开票标志" width="200" prop="account_billflag">
          <template slot-scope="scope">
            <span>{{scope.row.account_billflagname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="开票时间" width="200" prop="account_billtime">
          <template slot-scope="scope">
            <span>{{scope.row.account_billtime}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴收费员" width="200" prop="repay_userrealname">
          <template slot-scope="scope">
            <span>{{scope.row.repay_userrealname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴单位" width="200" prop="repay_orgname">
          <template slot-scope="scope">
            <span>{{scope.row.repay_orgname}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴时间" width="200" prop="repay_time">
          <template slot-scope="scope">
            <span>{{scope.row.repay_time}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴金额" width="200" prop="repay_cost">
          <template slot-scope="scope">
            <span>{{scope.row.repay_cost}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="是否补缴" width="200" prop="repay_flag">
          <template slot-scope="scope">
            <span>{{scope.row.repay_flag}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" label="补缴缴费方式" width="200" prop="repay_paytype">
          <template slot-scope="scope">
            <span>{{scope.row.repay_paytype}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination  background @size-change="handleSizeChangeFinDetail" @current-change="handleCurrentChangeFinDetail"
                     :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
  /* eslint-disable */
  export default {
    name: "fin-detail-table",
    props:['searchList','listLoadingFinDetail'],
    watch:{
      searchList(val){
        this.dataList=val.list
        this.total=val.count
      },
      listLoadingFinDetail(val){
        this.listLoading=val
      }
    },
    data() {
      return {
        listLoading: false,
        dataList: [],
        selectList: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods:{
      handleDownloadFinDetail(){

      },
      handleSelectChangeFinDetail(val) {
        this.selectList = val
      },
      handleSizeChangeFinDetail(val) {
        this.listQuery.limit = val
        this.$emit('handleSizeChangeFinDetail',val)
      },
      handleCurrentChangeFinDetail(val) {
        this.listQuery.page = val
        this.$emit('handleCurrentChangeFinDetail',val)
      },
    }
  }
</script>

<style scoped>
  .btn-group > .el-button span{
    display: none;
  }
  .btn-group > .el-button:hover{
    background-color: #409EFF;
  }
  .btn-group > .el-button:hover span{
    display: block;
  }
  .btn-group > .el-button:hover i{
    display: none;
  }
</style>
